<!DOCTYPE html>

<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

<!-- Head BEGIN -->
<head>
  <meta charset="utf-8">
  <title>零食网站《快购》</title>

  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta content="Metronic Shop UI description" name="description">
  <meta content="Metronic Shop UI keywords" name="keywords">
  <meta content="keenthemes" name="author">

  <meta property="og:site_name" content="-CUSTOMER VALUE-">
  <meta property="og:title" content="-CUSTOMER VALUE-">
  <meta property="og:description" content="-CUSTOMER VALUE-">
  <meta property="og:type" content="website">
  <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
  <meta property="og:url" content="-CUSTOMER VALUE-">

  <link rel="shortcut icon" href="favicon.ico">

  <!-- Fonts START -->
  <!-- Fonts END -->

  <!-- Global styles START -->          
  <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Global styles END --> 
   
  <!-- Page level plugin styles START -->
  <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
  <link href="assets/plugins/owl.carousel/assets/owl.carousel.css" rel="stylesheet">
  <link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
  <link href="assets/plugins/rateit/src/rateit.css" rel="stylesheet" type="text/css">
  <!-- Page level plugin styles END -->

  <!-- Theme styles START -->
  <link href="assets/pages/css/components.css" rel="stylesheet">
  <link href="assets/corporate/css/style.css" rel="stylesheet">
  <link href="assets/pages/css/style-shop.css" rel="stylesheet" type="text/css">
  <link href="assets/corporate/css/style-responsive.css" rel="stylesheet">
  <link href="assets/corporate/css/themes/red.css" rel="stylesheet" id="style-color">
  <link href="assets/corporate/css/custom.css" rel="stylesheet">
  <!-- Theme styles END -->
</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body class="ecommerce">
    <!-- BEGIN STYLE CUSTOMIZER -->
    <div class="color-panel hidden-sm">
      <div class="color-mode-icons icon-color"></div>
      <div class="color-mode-icons icon-color-close"></div>
      <div class="color-mode">
        <p>THEME COLOR</p>
        <ul class="inline">
          <li class="color-red current color-default" data-style="red"></li>
          <li class="color-blue" data-style="blue"></li>
          <li class="color-green" data-style="green"></li>
          <li class="color-orange" data-style="orange"></li>
          <li class="color-gray" data-style="gray"></li>
          <li class="color-turquoise" data-style="turquoise"></li>
        </ul>
      </div>
    </div>
    <!-- END BEGIN STYLE CUSTOMIZER --> 

    <!-- BEGIN TOP BAR -->
    <div class="pre-header" id="loginiframe">
    </div>
    <!-- END TOP BAR -->

    <!-- BEGIN HEADER -->
    <div class="header">
        <div class="container" id="headeriframe">
            <!-- BEGIN CART -->
            <!--END CART -->
            <!-- BEGIN NAVIGATION -->
            <!-- END NAVIGATION -->
        </div>
    </div>
    <!-- Header END -->

    <div class="main">
      <div class="container" id="app">
        <!-- BEGIN SIDEBAR & CONTENT -->
        <div class="row margin-bottom-40">
          <!-- BEGIN CONTENT -->
          <div class="col-md-12 col-sm-12">
            <h1>购物车</h1>
            <div class="goods-page" style="min-height: 500px;">
              <div class="goods-data clearfix">
                <div class="table-wrapper-responsive">
                <table summary="Shopping cart">
                  <tr>
                    <th class="goods-page-image">图片</th>
                    <th class="goods-page-description">商品</th>
                      <th class="goods-page-quantity">数量</th>
                    <th class="goods-page-price">单价</th>
                      <th class="goods-page-price">折扣</th>
                    <th class="goods-page-total" colspan="2">小计</th>
                  </tr>
                  <tr v-for="cart in cartlist">
                    <td class="goods-page-image">
                      <a href="javascript:;"><img :src="['upload/'+cart.product.filename]" alt="Berry Lace Dress"></a>
                    </td>
                    <td class="goods-page-description">
                      <h3><a href="javascript:;">{{cart.product.name}}</a></h3>
                    </td>
                      <td class="goods-page-quantity">
                          <div class="product-quantity" style="display: flex;align-items: center">
                              <i class="fa fa-plus" @click="increase(cart.id)"></i>
                              <input id="product-quantity"    type="text"  :value="cart.num"  readonly class="form-control input-sm" style="margin: 0px 5px;">
                              <i v-if="cart.num>1" class="fa fa-minus" @click="reduce(cart.id)"></i>
                          </div>
                      </td>
                    <td class="goods-page-price">
                      <strong><span>￥</span>
                          <template v-if="cart.product.tjprice >0">
                              <s>{{cart.product.price}}</s>           {{cart.product.tjprice}}
                          </template>
                          <template v-else>
                              {{cart.product.price}}
                          </template>

                      </strong>
                    </td>
                      <td class="goods-page-price">
                          <strong>{{cart.zk}}</strong>
                      </td>
                    <td class="goods-page-total">
                      <strong><span>￥</span>{{cart.xjtotal}}</strong>
                    </td>
                    <td class="del-goods-col">
                      <a class="del-goods" @click="delcart(cart.id)" href="javascript:;">&nbsp;</a>
                    </td>
                  </tr>

                </table>
                </div>

                <div class="shopping-total">
                  <ul>
                    <li class="shopping-total-price">
                      <em>总价</em>
                      <strong class="price"><span>￥</span>{{total}}</strong>
                    </li>
                  </ul>
                </div>
              </div>
              <a class="btn btn-default" href="index.html">继续购物 <i class="fa fa-shopping-cart"></i></a>
              <a class="btn btn-primary" type="submit" @click="addradd()">创建订单 <i class="fa fa-check"></i></a>
            </div>
          </div>
          <!-- END CONTENT -->
        </div>
        <!-- END SIDEBAR & CONTENT -->

        <!-- BEGIN SIMILAR PRODUCTS -->

        <!-- END SIMILAR PRODUCTS -->
      </div>
    </div>

    <!-- BEGIN STEPS -->
    <!-- END STEPS -->

    <!-- BEGIN PRE-FOOTER -->
    <!-- END PRE-FOOTER -->

    <!-- BEGIN FOOTER -->
    <div class="footer" id="footiframe">
    </div>
    <!-- END FOOTER -->

    <!-- BEGIN fast view of a product -->

    <!-- END fast view of a product -->

    <!-- Load javascripts at bottom, this will reduce page load time -->
    <!-- BEGIN CORE PLUGINS (REQUIRED FOR ALL PAGES) -->
    <!--[if lt IE 9]>
    <script src="assets/plugins/respond.min.js"></script>  
    <![endif]-->  
    <script src="assets/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>      
    <script src="assets/corporate/scripts/back-to-top.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <!-- END CORE PLUGINS -->

    <!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
    <script src="assets/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script><!-- pop up -->
    <script src="assets/plugins/owl.carousel/owl.carousel.min.js" type="text/javascript"></script><!-- slider for products -->
    <script src='assets/plugins/zoom/jquery.zoom.min.js' type="text/javascript"></script><!-- product zoom -->
    <script src="assets/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script><!-- Quantity -->
    <script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
    <script src="assets/plugins/rateit/src/jquery.rateit.js" type="text/javascript"></script>

    <script src="assets/corporate/scripts/layout.js" type="text/javascript"></script>
    <!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
<script type="text/javascript" src="axios/vue.js"></script>
<script type="text/javascript" src="axios/axios.min.js"></script>
<script type="text/javascript" src="axios/qs.js"></script>
<script type="text/javascript" src="axios/getUrlParams.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
</script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript">
    var qs = Qs
    var vmm = new Vue({
        el: '#app',
        data: {
            cartlist:[],
            sessionmember:"",
        },
        mounted(){


            this.getcheckmember()

            jQuery(document).ready(function() {
                Layout.init();
                Layout.initOWL();
                Layout.initImageZoom();
                Layout.initTouchspin();
                //Layout.initTwitter();
            });

        },
        methods: {
            //增加
            increase(id){
                axios.post('increasenum',qs.stringify({
                    id:id,
                })).then(response =>{
                    this.getcheckmember()
                }).catch(error =>{
                    console.log(error)
                })
            },

            //减少
            reduce(id){
                axios.post('reduce',qs.stringify({
                    id:id,
                })).then(response =>{
                    this.getcheckmember()
                }).catch(error =>{
                    console.log(error)
                })
            },
            getcheckmember(){
                axios.post('checkmember',qs.stringify({
                })).then(response =>{
                    if(response.data.data==200){
                        axios.post('cartList',qs.stringify({
                        })).then(response =>{
                            this.cartlist = response.data.list
                            this.total = response.data.total
                            this.sessionmember = response.data.sessionmember
                        }).catch(error =>{
                            console.log(error)
                        })
                    }else{
                        location.replace("login.html")
                    }
                }).catch(error =>{
                    console.log(error)
                })
            },

            //删除购物车商品
            delcart(id){
                axios.post('cartDel',qs.stringify({
                    id:id,
                })).then(response =>{
                    this.getcheckmember()
                    headapp.getcheckmember()
                }).catch(error =>{
                    console.log(error)
                })
            },

            addradd(){
                if(this.sessionmember==''){
                    location.replace("login.html")
                    return false;
                }
                axios.post('ordermsgAdd',qs.stringify({
                })).then(response =>{
                    this.getcheckmember()
                    layer.msg("创建订单成功",{icon:6})
                    headapp.getcheckmember()
                }).catch(error =>{
                    console.log(error)
                })

                // var index = layer.open({
                //     title:"填写收货地址",
                //     type:2,
                //     area:['600px','500px'],
                //     maxmin:true,
                //     content:"addradd.html"
                // })
            },

            // ordermsgadd(){
            //     if(this.sessionmember==''){
            //         location.replace("login.html")
            //     }
            //     axios.post('ordermsgAdd',qs.stringify({
            //     })).then(response =>{
            //         layer.msg("创建订单成功",{icon:6})
            //         this.getcheckmember()
            //         headapp.getcheckmember()
            //     }).catch(error =>{
            //         console.log(error)
            //     })
            // },
        }
    });
</script>

<script type="text/javascript">
    window.onload=function(){
        $("#loginiframe").load("iframe/loginiframe.html")
        $("#headeriframe").load("iframe/headeriframe.html")
        $("#footiframe").load("iframe/footiframe.html")

    }
</script>
</html>